<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
    router.back()
}

const password = ref<string | number>('');

const accountNumber = ref()

type keys = {
    account: number
    password: string | number
}

const identity = ref<keys[]>([
    {
        account: 15907814842,
        password: 123456
    }
])

const tips = ref('')

onMounted(() => {
    if (localStorage.getItem('identity')) {
        identity.value = JSON.parse(localStorage.getItem('identity') as string)
    }
    localStorage.setItem('identity', JSON.stringify(identity.value))
})

// 验证账号是否存在或者账号密码是否错误
const AccountVerificationFunc = (pw: string | number, num: number) => {
    if (pw && num) {
        for (let i = 0; i < identity.value.length; i++) {
            let item = identity.value[i]
            if (item.account == num && item.password == pw) {
                tips.value = '登录成功'
                localStorage.setItem('token_bilibili', 'FEAFJXCZ23423dsf')
                break
            } else if (item.account != num && item.password != pw) {
                tips.value = '账号密码不纯在'
                break
            } else {
                tips.value = '账号或密码错误'
                break
            }
        }
    } else if (!num) {
        tips.value = '账号不能为空'
    } else if (!pw) {
        tips.value = '密码不能为空'
    }
}

// 账号注册
const accountRegistration = (pw: string | number, num: number) => {
    console.log(typeof num)
    let count = 0
    identity.value.forEach(item => {
        if (num !== item.account) {
            count++
        }
    })

    if (count === identity.value.length) {
        identity.value = [...identity.value, {
            account: num,
            password: pw
        }]
        localStorage.setItem('identity', JSON.stringify(identity.value))
    }

}

</script>

<template>
    <div style="height: 100vh;" class=" -mt-11 z-50 bg-slate-100">
        <div class="">
            <div class=" flex h-11 px-3 justify-between items-center bg-white"><span @click="goBack"><van-icon
                        name="arrow-left" /></span><span>登录bilibili</span><span class=" text-xs text-white">登录</span>
            </div>
            <div class=" mt-3">
                <van-field v-model="accountNumber" type="number" label="账号" />
                <van-field v-model="password" type="password" label="密码" style="width: 100%;" />
                <div class=" p-3 text-right text-xs" style="color: #fb7299;">忘记密码</div>
            </div>

            <div class=" flex justify-center">
                <div class=" px-4 w-40 py-2 rounded-sm text-center" style="color: #fb7299; border: 1px solid #fb7299;"
                    @click="accountRegistration(password, accountNumber)">
                    注册</div>
                <div class=" w-40 px-4 ml-3 rounded-sm py-2 text-center text-white" style="background-color: #fb7299;"
                    @click="AccountVerificationFunc(password, accountNumber)">登录</div>
            </div>
            <p class=" mt-6 text-center text-xs">
                未注册过哔哩哔哩的手机号，我们将自动帮你注册账号<br>
                登录或完成注册即代表你同意隐私政策</p>
            <p>{{ tips }}</p>
        </div>
    </div>
</template>